<template>
  <!-- 病例病案管理 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="病 例 病 案 管 理">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 搜索 -->
    <van-search
      v-model="searchTxt"
      show-action
      placeholder="请输入病人姓名"
      @clear="onCancel"
      @search="onSearch"
      @cancel="onCancel"
    />

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 数据列表区域 -->
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item
          v-for="(item, index) in PersonList"
          :key="index"
          :title="item.username"
          value="查看详情"
          :label="'病例编号：' + item.id"
        >
          <p class="nowIllness">性别: {{ item.sex }}</p>
          <p class="nowIllness">年龄: {{ item.age }}</p>
          <p class="nowIllness">身份证: {{ item.carid }}</p>
          <p class="nowIllness">联系方式: {{ item.phone }}</p>
          <p class="nowIllness">主治医生: {{ item.doctor }}</p>
          <p class="nowIllness">病例史：</p>
          <p class="nowInner">{{ item.description }}</p>
          <div class="ItemInner_bottom">
            <div class="modifyBtn">
              <van-button
                round
                size="small"
                type="info"
                @click="goModify(item.id)"
                >修改此病案信息</van-button
              >
            </div>
            <!-- <div class="lookOver">
              <van-button
                round
                size="small"
                type="info"
                @click="lookOver(item.id)"
                >查看附件</van-button
              >
            </div> -->
            <div class="lookOver">
              <van-button
                round
                size="small"
                type="danger"
                @click="deleteData(item.id)"
                >删除此病历</van-button
              >
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-pull-refresh>

    <!-- 按钮区域 -->
    <!-- <div class="Btn">
      <van-button
        @click="addCase"
        block
        round
        color="linear-gradient(to right, #26de81, #20bf6b)"
      >
        添 加 病 例 病 案
      </van-button>
    </div> -->
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
export default {
  name: "Medicalcase",

  data() {
    return {
      isLoading: false, //下拉刷新状态
      searchTxt: "", //搜索字段
      activeNames: ["1"],
      //病例列表数组
      PersonList: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {},

  methods: {
    //获取数据列表
    getList() {
      this.$http.get("report", {}).then((res) => {
        console.log(res);
        this.PersonList = res.data.data;
      });
    },
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    //下拉刷新事件
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },
    //修改按钮点击
    goModify(id) {
      //console.log(pid);
      this.$router.push({
        path: "./modifyCase",
        query: { id },
      });
    },
    //查看附件
    /* lookOver(id) {
      console.log("查看： " + id);
    }, */
    //删除病历
    deleteData(id) {
      Dialog.confirm({
        title: "提示",
        message: "是否确认删除此病历数据？此条病历数据将会被用久删除!!!",
        confirmButtonColor: "#07c160",
        cancelButtonColor: "#ff976a",
      })
        .then(() => {
          //调用删除接口
          console.log("删除： " + id);
          this.deleteInterface(id);
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    //删除接口
    deleteInterface(id) {
      this.$http
        .delete("report/delete", {
          params: {
            ids: id,
          },
        })
        .then((res) => {
          console.log(res);
          Toast("删除成功");
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        });
    },
    //添加按钮
    /* addCase() {
      this.$router.push({
        path: "./addCase",
      });
    }, */
    //搜索取消
    onCancel() {
      this.getList();
    },
    //搜索
    onSearch() {
      this.$http.get("report/page", { params: {
        pageSize:'100',
        pageNum:'1',
        name:this.searchTxt
      } }).then((res) => {
        this.PersonList = res.data.data.records
      });
    },
    //上传附件
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
#app /deep/ .van-collapse {
  margin-bottom: 45px;
}
.nowInner {
  text-indent: 2em;
}
.van-pull-refresh {
  margin-bottom: 44px;
}
.Btn {
  position: fixed;
  width: 100%;
  bottom: 0;
}
#app /deep/ .van-cell__right-icon {
  margin-top: 5px;
}
.ItemInner_bottom {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}
</style>